<template>
  <section class="publish-act">
    <simple-title title="发布活动" :show="false"></simple-title>
    <div class="inner">
      <div class="main-img">
        <img :src="img" alt="">
      </div>
      <Form :model="formItem" label-position="right" :label-width="100">
        <FormItem label="上传图片：">
          <Input v-model="avatar" style="width: 300px"></Input>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <Upload action="http://www.hfbb.com/api/common/upload" style="display: inline-block"
                  :on-success="sucss"
          >
            <Button icon="ios-cloud-upload-outline" type="primary">浏览</Button>
          </Upload>
          <p class="tip">建议使用626*226的图片，支持JPG,PNG,GIF格式，100KB以内。</p>
        </FormItem>
        <h2>一、项目介绍/活动奖项</h2>
        <FormItem label="内容简介：">
          <Input v-model="formItem.reward" type="textarea" :rows="4" placeholder="内容详情..." />
        </FormItem>
        <h2>二、活动时间</h2>
        <FormItem label="活动时间：">
            <DatePicker type="date" format="yyyy-MM-dd" v-model="starttime" placeholder="开始时间" style="width: 200px" @on-change="timeone"></DatePicker>
            -
            <DatePicker type="date" format="yyyy-MM-dd" v-model="endtime" placeholder="结束时间" style="width: 200px" @on-change="timetwo"></DatePicker>
        </FormItem>
        <h2>三、详细内容（图文混编）</h2>
        <div id="editorElem"></div>
        <h2>三、参加者条件</h2>
        <FormItem label="参加条件：">
          <Input v-model="formItem.condition" type="textarea" :rows="4" placeholder="内容详情..." />
        </FormItem>
        <p class="type"> <Checkbox v-model="cancommon">勾选允许评论</Checkbox></p>
      </Form>
      <div style="padding-left: 100px">
        <Button type="primary" size="large" style="width: 206px" @click="subimt">发布</Button>
      </div>
    </div>
  </section>
</template>

<script>
import E from 'wangeditor'
import SimpleTitle from '../../../components/Title/SimpleTitle'
export default {
  name: 'PublishAct',
  components: {
      SimpleTitle
  },
   data () {
      return {
          formItem: {},
          type1: '',
          type2: '',
          cancommon: false,
          avatar:"",
          img:'',
          starttime:'',
          endtime:'',
          isping:'',
          id:'',
          editorContent:'',
          editorContent1:'',
      }
   },
    created () {
        this.getinfo()
    },
    computed: {

    },
    methods: {
        timeone (date){
            this.starttime = date
       },
        timetwo (date){
            this.endtime = date
        },
        sucss (response) {
            this.avatar = response.data.url
            this.img = this.$Url+response.data.url
        },
        subimt () {
            let _this =this
            _this.isping =_this.cancommon ?1:2
            _this.$post('/api/activity/addActivity',
                {
                    token:_this.$token,
                    image:_this.avatar,
                    reward:_this.formItem.reward,
                    starttime:_this.starttime,
                    endtime:_this.endtime,
                    content:_this.editorContent,
                    condition:_this.formItem.condition,
                    isping:_this.isping,
                    activity_id:_this.id
                }, function (res) {
                    _this.$message.success(res.msg);
                    _this.$router.push({path:'/my/mytheme/actlist'})
                }, function (errcode, errmsg,err) {
                    console.log(err)
                    console.log(errmsg)
                })
        },
        getinfo () {
           this.id = this.$route.query.id
            let _this =this
            _this.$post('/api/activity/activityInfo',
                {
                    activity_id:_this.id
                }, function (res) {
                    console.log(res.data)
                    _this.img = _this.$Url+res.data.image
                    _this.avatar = res.data.image
                    _this.formItem = res.data
                    _this.isping = res.data.isping
                    _this.cancommon = _this.isping==1?true:false
                    _this.starttime = res.data.starttime
                    _this.endtime =res.data.endtime
                    _this.editorContent1 = res.data.content
                    var editor = new E('#editorElem')
                    editor.create()
                    editor.txt.html(_this.editorContent1)
                }, function (errcode, errmsg,err) {
                    console.log(err)
                    console.log(errmsg)
                })
        }
    },
    mounted() {
        var editor = new E('#editorElem')
        editor.customConfig.onchange = (html) => {
            this.editorContent = html
        }
        editor.customConfig.uploadImgServer = this.$IUrl  // 上传图片到服务器
        editor.customConfig.uploadFileName = 'file';
        editor.customConfig.uploadImgHooks = {
            customInsert: function (insertImg, result, editor) {
                var url =result.data[0]
                insertImg(url)
            }
        }
        editor.create()

    }
}

</script>

<style lang="less" >
  @import "../../../style/style.less";
  .publish-act {
    border: 1px solid @border-color;
    padding: 15px !important;
    .inner {
      padding-top: 15px;
      .ivu-upload-list{
        display: none;
      }
      h2 {
        font-size: 16px;
        color: #666;
        margin-bottom: 15px;
      }
      .main-img {
        border: 1px solid @border-color;
        padding: 10px;
        line-height: 1;
        font-size: 0;
        margin-bottom: 20px;
        height: 248px;
        width: 668px;
        img {
          width: 100%;
          height: 226px;
          border-radius: 8px;
        }
      }
      .type{
        font-size: 20px;
        color: #666;
        margin-bottom: 15px;
        padding-left: 25px;
      }
    }
  }
</style>
